<template>
  <div v-loading="load">
    <div class="order-body" >
      <el-tabs v-model="activeName" >
        <el-tab-pane label="投保信息" name="1">
          <div class="orde-state-tag" >保障中</div>
          <el-descriptions class="margin-top" :column="1" size="small" border>
            <el-descriptions-item>
              <template slot="label">
                保单号
              </template>
              <span>{{ info.bd_no }}</span>
              <span class="order-link-txt" style="margin-left: 10px" v-if="info.bd_url" @click="downLoad(info.bd_url)">下载电子保单</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                保险公司
              </template>
              <span>{{ info.bx_name }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                保费
              </template>
              <span>{{ info.total_price }}</span>
              <span class="order-link-txt"  style="margin-left: 10px" v-if="info.fp_url" @click="downLoad(info.fp_url)">开票</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                期限
              </template>
              <span>从{{ info.start_time }} 到 {{ info.end_time }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                保险条款
              </template>
              <div>
                <div  class="order-link-txt" @click="todoc(5)">中国太平洋财产保险股份有限公司雇主责任保险（2016版）条款</div>
                <div  class="order-link-txt" @click="todoc(6)">中国太平洋财产保险股份有限公司雇主责任保险（2016版）附加死亡及伤残补助金保险条款</div>
                <div  class="order-link-txt" @click="todoc(6)">中国太平洋财产保险股份有限公司雇主责任保险附加法律费用额外增加条款</div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
          <div class="form-window" >
            <div class="form-window-line"></div>
            <div class="form-window-txt">投保企业</div>
          </div>
          <el-descriptions class="margin-top" :column="1" size="small" border>
            <el-descriptions-item>
              <template slot="label">
                企业名称
              </template>
              <span>{{ info.insure.name }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                统一信用编码
              </template>
              <span>{{ info.insure.client }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                联系人
              </template>
              <span>{{ info.insure.contact }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                电话号码
              </template>
              <span>{{ info.insure.contact_mobile }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                地址
              </template>
              <span>{{ info.insure.province }}{{ info.insure.city }}{{ info.insure.area }}{{ info.insure.address }}</span>
            </el-descriptions-item>
          </el-descriptions>
          <div v-for="(item,key) in info.open_arr" :key="'b'+key">
            <div class="form-window" >
              <div class="form-window-line"></div>
              <div class="form-window-txt">投保企业{{key + 1}}</div>
            </div>
            <el-descriptions class="margin-top" :column="1" size="small" border>
              <el-descriptions-item>
                <template slot="label">
                  企业名称
                </template>
                <span>{{ item.name }}</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  统一信用编码
                </template>
                <span>{{ item.client }}</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  负责人
                </template>
                <span>{{ item.contact }}</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  电话号码
                </template>
                <span>{{ item.contact_mobile }}</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  经营地址
                </template>
                <span>{{ item.address }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="form-window" >
            <div class="form-window-line"></div>
            <div class="form-window-txt">保单生效日期</div>
          </div>
          <el-descriptions class="margin-top" :column="1" size="small" border>
            <el-descriptions-item>
              <template slot="label">
                录入日期
              </template>
              <span>{{ info.create_time }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                生效日期
              </template>
              <span>{{ info.start_time }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                失效日期
              </template>
              <span>{{ info.end_time }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="保障人员" name="2">
          <div>
              <div class="inpbox">
                <input type="text" v-model="key_words" class="inpbox_inp" placeholder="请输入姓名或身份证号码"  name="" id="">
                <el-button class="com-btn" size="mini" @click="sosuoclick">搜索</el-button>
                <!-- <div class="sosuo" @click="sosuoclick">搜索</div> -->
              </div>
            </div>
          <el-table size="mini" border :data="users" @selection-change="handleSelectionChange" >
            
            <el-table-column type="selection" width="60px" v-if="user_state " ></el-table-column>
            <el-table-column label="姓名" prop="name" ></el-table-column>
            <el-table-column label="身份证号" prop="id_card" ></el-table-column>
            <el-table-column label="生效原因" >
              <template slot-scope="scope">
                {{scope.row.add_id == 0 ? '投保' : '批改'}}
              </template>
            </el-table-column>
          </el-table>
          <div class="order-table-btns" >
            <el-button size="small" @click="dao()">导出清单</el-button>
            <el-button size="small"  v-if="user_state " class="com-btn" @click="tiHuan()">批增人员</el-button>
            <el-button size="small"  v-if="user_state " class="com-btn" @click="tiHuan()">批改人员</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="批改记录" name="3">
          <el-table size="mini" border :data="p_list" >
            <el-table-column label="生效日期" prop="start_time" width="140px"></el-table-column>
            <el-table-column label="下单日期" prop="create_time" width="140px"></el-table-column>
            <el-table-column label="保单号" prop="order_no" min-width="170px"></el-table-column>
            <el-table-column label="批改单号" prop="pd_no" min-width="170px"></el-table-column>
            <el-table-column label="状态" width="80px">
              <template slot-scope="item" >
                <el-tag size="mini" type="info" v-if="item.row.state == 0">已取消</el-tag>
                <el-tag size="mini" type="danger" v-if="item.row.state == 1">待支付</el-tag>
                <el-tag size="mini" type="success" v-if="item.row.state == 2">已支付</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140px">
              <template slot-scope="item" >
                <span class="order-link-txt" @click="see(item.row.id)">{{item.row.state == 1 ? '去支付' : '详情'}}</span>
                <span class="order-link-txt" @click="downLoad(item.row.url)" v-if="item.row.url">下载电子保单</span>
                <span class="order-link-txt" @click="cancel(item.row.id)" v-if="item.row.state == 1">取消</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div v-if="activeName == 1">

      </div>
      <div v-if="activeName == 2">

      </div>
      <div v-if="activeName == 3">

      </div>
    </div>
    <el-dialog :visible.sync="user_model" title="替换人员" width="800px" :append-to-body="true" :close-on-click-modal="false" >
      <div v-loading="loading">
        <div class="date-change-box">
          <div style="width: 90px;height: 30px;line-height: 30px">生效日期：</div>
          <div style="width: calc(100% - 90px);height: 30px;line-height: 30px">
            <el-date-picker
                    @change="selectStartTime()"
                    v-model="start_time"
                    :picker-options="pickerOptions"
                    type="date"
                    size="small"
                    placeholder="选择日期"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </div>
        </div>
        <el-table size="mini" border :data="u_users" >
          <el-table-column label="原姓名" prop="name" ></el-table-column>
          <el-table-column label="原身份证号" prop="id_card" ></el-table-column>
          <el-table-column label="替换姓名" >
            <template slot-scope="item" >
              <el-input type="text" v-model="item.row.new_name" placeholder="替换姓名" size="mini" ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="替换身份证号" >
            <template slot-scope="item" >
              <el-input type="text" v-model="item.row.new_card" placeholder="替换身份证号" size="mini" ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" >
            <template slot-scope="item" >
              <el-button icon="el-icon-delete" size="mini" @click="delUser(item.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="order-table-btns" v-if="dec_num == 0">
          <el-button size="small" type="success" icon="el-icon-plus" @click="addUser()">添加人员</el-button>
        </div>
        <div class="footer-text-box">
          <span class="text-grey">批增人员{{inc_num}}人，批减人员{{dec_num}}人</span>
          <span class="total-price-box">合计保费：{{total_price}}元</span>
        </div>
        <div class="footer-btn-box">
          <el-button size="small" @click="cancleTh()">取消</el-button>
          <el-button size="small" class="com-btn" @click="tiHuanSubmit()">提交</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return {
      id:0,
      info:{
        insure:{},
      },
      load : false,
      loading: false,
      key_words:'',
      activeName : '1',
      users:[],
      u_users:[],
      user_state : 0,
      user_model:false,
      p_list:[],
      open_arr:[],
      start_time:'',
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      dec_num:0,
      inc_num:0,
      total_price:0,
      price:0,
    }
  },
  mounted() {
    this.id = this.$route.params.id;
    if(this.$route.query.type)this.activeName = this.$route.query.type;
    this.getData();
    this.getUsers();
    this.getPlist();
  },
  methods:{
    //选择开始时间
    selectStartTime(){
      this.ajaxs('order/getChangePrice',{
        data: {
          id : this.id,
          start_time:this.start_time
        },
        success:(res) => {
          if(res.code){
            this.price = res.msg;
            this.totalPrice();
          }else{
            this.toast(res.code,res.msg);
          }
        }
      })
    },
    totalPrice(){
        this.total_price = ((this.inc_num - this.dec_num) * this.price).toFixed(2);
        console.log(this.price);
    },
    see(id){
      this.$router.push({
        path:'/index/order/endorse/'+id
      })
    },
    downLoad(url){
      if(url) {
        window.open(url);
      }
    },
    todoc(type){
      let routeData = this.$router.resolve({
        path: '/index/index/doc/'+type,
      });
      window.open(routeData.href, '_blank');
    },
    dao(){
      window.location.href='https://fb.dongjbao.com/seller/Download/downloadOrderUser/id/'+this.id;
    },
    tiHuanSubmit(){
      this.loading = true;
      this.ajaxs('order/changeOrderDo',{
        data: {
          order_id : this.id,
          user:this.u_users,
          start_time:this.start_time
        },
        success:(res) => {
          this.loading = false;
          if(res.code){
            this.$router.push({
              path:'/index/order/endorse/'+res.msg
            })
          }else{
            this.toast(res.code,res.msg);
          }
        }
      })
    },
    cancleTh(){
      this.user_model = false;
    },
    tiHuan(){
      //if(this.u_users.length == 0)return this.toast(0,'请选择要替换的人员');
      this.dec_num = this.u_users.length;
      this.inc_num = this.u_users.length;
      this.total_price = 0;
      this.user_model = true;
      this.$forceUpdate();
    },
    handleSelectionChange(e){

      this.u_users = e;
      this.$forceUpdate();
    },
    addUser(){
      if(this.dec_num > 0)return this.toast(0,'替换时不能添加人员');
      this.u_users.push({
        name:'----',
        id_card:'----',
        new_name:'',
        new_card:'',
      })
      this.inc_num = this.u_users.length;
      this.totalPrice();
    },
    delUser(index){
      if(this.u_users[index]['id']){
        this.dec_num--;
      }
      this.u_users.splice(index,1);
      this.inc_num = this.u_users.length;
      this.totalPrice();
    },
    getPlist(){
      this.ajaxs('order/orderUpdate',{
        data:{
          id : this.id
        },
        success:(res) => {
          this.p_list = res.msg;
        }
      })
    },
    sosuoclick(){
      this.getUsers()
    },
    getUsers(){
      this.ajaxs('order/getOrderUser',{
        data:{
          id : this.id,
          key_words:this.key_words
        },
        success:(res) => {
          this.users = res.msg.user;
          this.$forceUpdate();
          this.user_state = res.msg.state;
        }
      })
    },
    getData(){
      this.load = true;
      this.ajaxs('order/orderInfo',{
        data:{
          id: this.id,
        },
        success:(res) => {
          this.info = res.msg;
          this.load = false;
        }
      })
    },
    cancel(id){
      this.ajaxs('order/cancelEndorse',{
        data:{id:id},
        success:(res) => {
          this.toast(res.code,res.msg);
          if(res.code){
            this.getPlist();
          }
        }
      })
    },
  }
}
</script>

<style scoped>
@import "../../assets/css/order/list.css";
@import "../../assets/css/index/form.css";
  .date-change-box{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .footer-btn-box{
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }
.footer-text-box{
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
.text-grey{
  font-size: 13px;
  color: #999999;
}
.total-price-box{
  margin-left: 10px;
  font-size: 15px;
  color: #F95D4A;
}
.inpbox{
  display: flex;
  margin:10px 0;
  /* justify-content: space-between; */
}
.inpbox_inp{
  margin-right: 20px;
  font-size: 16px;
  border-radius: 5px;
  padding: 2px 0px 2px 10px;
  border: 1px solid #EBEEF5;
  color: #777777;
}
.sosuo{
  margin-top: 2px;
  font-size: 14px;
  color: #777777;
  cursor: pointer;
}
input[type=text]:focus {
				outline: none;
}
input::-webkit-input-placeholder{   /* 使用webkit内核的浏览器 */
  color:#999;
 
  font-size: 12px;
}

</style>
